<template>
  <div>
    <router-link :to="{path:'/oauth2/client/add'}">
      <el-button>新增</el-button>
    </router-link>
    <el-table
        :data="data.records"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="应用ID"
          width="180">
      </el-table-column>
        <el-table-column
            prop="name"
            label="应用名"
            width="180">
         </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[5,10,30]"
        :page-size="query.rowsPerPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.total">
    </el-pagination>
  </div>
</template>

<script>
import {clientListByUser} from "../../request/api";
import {Message} from "_element-ui@2.15.6@element-ui";

export default {
  data() {
    return {
      query: { page: 1, rowsPerPage: 5 },
      currentPage4: 4,
      data: {
        current: null,
        size: null,
        total: 0,
        hasNext: true,
        records: []
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleSizeChange(val) {
      this.query.rowsPerPage = val
      console.log(`每页 ${val} 条`);
      this.getList()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.getList()
      console.log(`当前页: ${val}`);
    },
    getList() {
      clientListByUser(this.query).then(res=>{
         if(res.code != 0) {
           Message({
             showClose: true,
             message: res.msg,
             type: 'error'
           });
           return
         }
         this.data = res.data
      })
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
}
</script>